<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  body {
    background: #f7f9fb;
    margin: 0;
    padding: 0;
  }

  .container {
    width: 90%;
    max-width: 1100px;
    margin: -50px auto;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 2px 12px rgba(80, 133, 203, 0.08);
    padding: 30px;
  }

  .container h2 {
    margin-top: 0;
    color: #0327b3;
    text-align: center;
    padding: 0;
    margin: 0 auto 10px;
  }

  /* 编辑框样式 */
  .gray {
    background: #f4f6f9;
    border-radius: 8px;
    padding: 30px 20px 20px 20px;
    box-shadow: 0 2px 8px rgba(80, 133, 203, 0.06);
  }

  #edit-box {
    width: 100%;
    margin: 0px auto;
  }

  #edit-box div {
    width: 350px;
    display: inline-block;
    text-align: left;
    margin-bottom: 20px;
  }

  .head-box {
    margin-bottom: 0 !important;
  }

  #edit-box div [for="head"] {
    width: auto;
  }

  #edit-box div #head {
    width: 200px;
    margin-left: 17px;
  }

  #edit-box .avatar-preview {
    display: inline-block;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    float: right;
  }

  #edit-box .avatar-preview img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
  }

  #edit-form label {
    display: inline-block;
    width: 80px;
    font-weight: 500;
    color: #0327b3;
    margin-bottom: 10px;
  }

  #edit-form input[type="text"],
  #edit-form input[type="password"],
  #edit-form select {
    width: 220px;
    padding: 7px 10px;
    border: 1px solid #d0d7e5;
    border-radius: 5px;
    margin-bottom: 18px;
    font-size: 15px;
    outline: none;
    transition: border 0.2s;
  }

  #edit-form input[type="text"]:focus,
  #edit-form input[type="password"]:focus,
  #edit-form select:focus {
    border: 1.5px solid #5085cb;
    background: #f0f6ff;
  }

  #edit-form button {
    background: #2a4dd0;
    color: #fff;
    border: none;
    border-radius: 5px;
    padding: 8px 22px;
    font-size: 15px;
    cursor: pointer;
    transition: background 0.2s;
    margin-right: 12px;
  }

  #edit-form .delete-btn {
    background: #e74c3c;
  }

  #edit-form button:hover {
    background: #0327b3;
  }

  #edit-form .delete-btn:hover {
    background: #c0392b;
  }
</style>

<body>
  <div class="container">
    <h2>编辑用户</h2>
    <div class="gray">
      <div id="edit-box">
        <form id="edit-form" action="../control/doUser.php?action=user&save=修改" method="post"
          enctype="multipart/form-data">
          <?php
          $users = $_SESSION['users'];
          foreach ($users as $user) {
            $uId = $user['uId'];
            if (isset($_GET['uId']) && $_GET['uId'] == $uId) {
              $uName = $user['uName'];
              $head = $user['head'];
              $uPass = $user['uPass'];
              $gender = $user['gender'];
              $role = $user['role'];
            }
          }
          echo <<<EOF
          <input type="hidden" id="edit-uid" name="uId" value="$_GET[uId]">
          <input type="hidden" name="origin_head" value="$head">
          <div>
            <label for="uName">用户名</label>
            <input type="text" id="uName" name="uName" required value="$uName" readonly onclick="alert('用户名不可修改！')">
          </div>
          <br>
          <div class="head-box">
            <label for="head">上传头像</label>
            <input type="file" id="head" name="head" accept="image/*" onchange="previewAvatar(event)" value="$head">
            <div class="avatar-preview" id="avatarPreview"></div>
          </div>
          <br>
          <div>
            <label for="password" >密码</label>
            <input type="password" id="password" name="uPass" required value="$uPass">
          </div>
          <br>
          <div>
            <label for="password" >确认密码</label>
            <input type="password" id="passwordT" name="uPass" required value="$uPass">
          </div>
          <br>
          <div>
            <label for="gender">性别</label>
            <select id="gender" name="gender">
            
EOF;
          if ($gender == 1) {
            echo '<option value="0">请选择</option >';
            echo '<option value="1" selected>女</option>';
            echo '<<option value="2">男</option>';
          } else if ($gender == 2) {
            echo '<option value="0">请选择</option >';
            echo '<option value="1">女</option>';
            echo '<<option value="2" selected>男</option>';
          }
          echo <<<EOF
            </select>
          </div>
          <br>
          <button type="submit" class="edit-btn" onclick="save()">保存</button>
          
EOF;
          // 根据id判断是否是管理员
          if ($role === "user"
          ) {
            // 普通用户，跳转到用户管理
            echo '<button type="button" class="delete-btn" onclick="window.location.href=\'../views/indexBms.php?action=user\'">取消</button>';
          } else {
            // 管理员，跳转到系统设置
            echo '<button type="button" class="delete-btn" onclick="window.location.href=\'../views/indexBms.php?action=setting\'">取消</button>';
          }
          ?>
        </form>
      </div>
    </div>
  </div>

</body>
<script>
  function previewAvatar(event) {
    const preview = document.getElementById('avatarPreview');
    preview.innerHTML = '';
    const file = event.target.files[0];
    if (file) {
      const img = document.createElement('img');
      img.src = URL.createObjectURL(file);
      preview.appendChild(img);
    }
  }
  function img(head) {
    const preview = document.getElementById('avatarPreview');
    preview.innerHTML = '';
    const img = document.createElement('img');
    img.src = "../../bbs/image/head/" + head;
    preview.appendChild(img);
  }
  window.onload = function () {
    img('<?php echo $head; ?>');
  }
  function save() {
    if (document.getElementById('password').value != document.getElementById('passwordT').value) {
      document.getElementById('password').value = '';
      document.getElementById('passwordT').value = '';
      alert('两次密码不一致，请重新输入！');
      return window.event.returnValue = false;
    }
    confirm('确认修改吗？') ? true : window.event.returnValue = false;
  }

</script>

</html>